import React, { Component } from "react";
import { Input, Button, DatePicker, Modal, Breadcrumb } from "antd";
import { Link } from "dva/router";
import moment from "moment";
import "./less/ResignationList.less";
import PTable from "../../../components/Pro/PTable";

const { confirm } = Modal;
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD";

export default class District extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      forceUpdate: false,
      pageParm: {
        pageSize: "10",
        pageNumber: "1",
        keyword: "",
        startLeaveDate: "", //离职开始日期
        endLeaveDate: "" //离职开始日期
      },
      keyword: "",
      startTime: null,
      endTime: null,
      start: false,
      end: false
    };
  }

  //时间选择
  onChangeTime = (date, dateString) => {
    if (dateString[0] !== "") {
      this.setState({
        start: true,
        end: true,
        startTime: dateString[0],
        endTime: dateString[1]
      });
    } else {
      this.setState({
        start: false,
        end: false,
        startTime: "",
        endTime: ""
      });
    }
  };

  //table 数据变化
  dateTableChange = data => {
    console.log(data);
    //this.setState({ number: data.total });
  };

  //输入框的书写，关键字（姓名或手机号）
  inputTracknameChange = e => {
    // let tmp = Object.assign({}, this.state.ajaxPagePara);
    // tmp.data.Trackname = e.target.value.trim();
    console.log(e.target.value.trim());
    this.setState({ keyword: e.target.value.trim() });
  };

  //点击搜索
  search = () => {
    const pageParm = { ...this.state.pageParm };
    if (this.state.start !== false) {
      const startLeaveDate = this.state.startTime;
      pageParm.startLeaveDate = startLeaveDate;
    } else {
      pageParm.startLeaveDate = "";
    }
    if (this.state.end !== false) {
      const endLeaveDate = this.state.endTime;
      pageParm.endLeaveDate = endLeaveDate;
    } else {
      pageParm.endLeaveDate = "";
    }
    const { keyword } = this.state;
    pageParm.keyword = keyword;
    this.setState({ pageParm });
  };

  //重置
  resetting = () => {
    this.setState(
      {
        keyword: "",
        startTime: "",
        endTime: "",
        start: false,
        end: false
      },
      () => {
        this.search();
      }
    );
  };

  // 点击查看展示信息弹窗
  // clickHandlerView = (orderID) => {
  //   console.log(orderID);
  //   this.setState({
  //     checkModal: true,
  //   });
  //   // this.checkMessageTitle(orderID);
  // };
  //删除
  showDeleteConfirm = orderID => {
    console.log(orderID);
    const that = this;
    confirm({
      title: "是否删除所选信息，删除后无法找回。是否确认删除？",
      okText: "确认",
      cancelText: "取消",
      onOk() {
        that.orderDelete(orderID);
      },
      onCancel() {
        console.log("Cancel");
      }
    });
  };
  // 订单删除
  orderDelete = orderID => {
    console.log(orderID);
    // lib.trainOrderDelete({data: {trainOrderID: orderID}}).then((data) => {
    //   console.log("订单删除", data);
    //   this.trainOrderPage();
    // }, (err) => {
    //   console.log("订单删除", err);
    // });
  };

  // 表格渲染
  renderOrderList = () => {
    /* const pageInitStudent = {
      defaultPageSize: 6,
      showQuickJumper: true,
      pageSizeOptions: ["5", "10", "15", "20", "25"],
      showSizeChanger: true
    }; */
    const columns = [
      {
        title: "姓名",
        dataIndex: "name",
        key: "name"
      },
      {
        title: "所属部门",
        dataIndex: "departName",
        key: "departName"
      },
      {
        title: "工号",
        dataIndex: "jobNo",
        key: "jobNo"
      },
      {
        title: "手机号",
        dataIndex: "mobilePhone",
        key: "mobilePhone"
      },
      {
        title: "邮箱",
        dataIndex: "email",
        key: "email"
      },
      {
        title: "入职日期",
        dataIndex: "entryDate",
        key: "entryDate"
      },
      {
        title: "离职日期",
        dataIndex: "leaveDate",
        key: "leaveDate"
      }
    ];
    return (
      <PTable
        style={{ marginTop: 20 }}
        columns={columns}
        url="enterpriseLeaveList"
        pageParm={this.state.pageParm}
        forceUpdate={this.state.forceUpdate}
        dateChange={this.dateTableChange}
        showTotal={total => `共搜索到${total}条记录`}
      />
    );
  };

  render() {
    return (
      <div className="ResignationList">
        <div style={{ marginTop: 16 }} className="resume-breadcrumb">
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/Organization/departmentmanagement">组织架构</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>已离职列表</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <div className="form">
          <span>
            关键字：
            <Input
              style={{ width: 214 }}
              placeholder="请输入姓名、手机号"
              onChange={this.inputTracknameChange}
              value={this.state.keyword}
              maxLength="20"
            />
          </span>
          <span style={{ marginLeft: 16 }}>
            离职日期：
            <RangePicker
              format={dateFormat}
              onChange={this.onChangeTime}
              value={[
                this.state.start
                  ? moment(this.state.startTime, dateFormat)
                  : null,
                this.state.end ? moment(this.state.endTime, dateFormat) : null
              ]}
            />
          </span>
          <Button
            style={{ marginLeft: 16 }}
            type="primary"
            onClick={this.search}
          >
            搜索
          </Button>
          <Button style={{ marginLeft: 16 }} onClick={this.resetting}>
            重置
          </Button>
        </div>
        <div>{this.renderOrderList()}</div>
      </div>
    );
  }
}
